import React, { Suspense } from 'react'
import routerList from './routerConfig'
import { RouteItem } from './type'
import { Route, Routes, Navigate, BrowserRouter, HashRouter } from 'react-router-dom'

function RouterView() {
    const { mode, routes } = routerList
    const renderRoutes = (routes: RouteItem[]) => {
        return routes.map((item: RouteItem, index: number) => {
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to}></Navigate> : <item.element></item.element>}>
                {
                    item.children && renderRoutes(item.children)
                }
            </Route>
        })
    }
    return (
        <Suspense fallback={<div>加载中......</div>}>
            {mode === 'history' ? <BrowserRouter>
                <Routes>
                    {
                        renderRoutes(routes)
                    }
                </Routes>
            </BrowserRouter> : <HashRouter>
                <Routes>
                    {
                        renderRoutes(routes)
                    }
                </Routes>
            </HashRouter>}
        </Suspense>
    )
}

export default RouterView